<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="../templates/commonClient.xhtml">
	<ui:define name="pageTitle">Title</ui:define>
	<ui:define name="pageHeader">Header</ui:define>

	<ui:define name="contenu">
		<div id="myCarousel" class="carousel slide">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>

			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner">
				<div class="item active">
					<div class="fill"
						style="background-image: url('/voyages-web/resources/img/pics/1002.jpg');"></div>
					<div class="carousel-caption">
						<h1>Destinations soleil</h1>
					</div>
				</div>
				<div class="item">
					<div class="fill"
						style="background-image: url('/voyages-web/resources/img/pics/1005.jpg');"></div>
					<div class="carousel-caption">
						<h1>Dinez dans les plus beaux hotels</h1>
					</div>
				</div>
				<div class="item">
					<div class="fill"
						style="background-image: url('/voyages-web/resources/img/pics/1041.jpg');"></div>
					<div class="carousel-caption">
						<h1>Détendez vous</h1>
					</div>
				</div>
				<div class="item">
					<div class="fill"
						style="background-image: url('/voyages-web/resources/img/pics/1043.jpg');"></div>
					<div class="carousel-caption">
						<h1>Optez pour la simplicité</h1>
					</div>
				</div>
				<div class="item">
					<div class="fill"
						style="background-image: url('/voyages-web/resources/img/pics/1058.jpg');"></div>
					<div class="carousel-caption">
						<h1>Le paradis a prix mini</h1>
					</div>
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#myCarousel" data-slide="prev">
				<span class="icon-prev"></span>
			</a> <a class="right carousel-control" href="#myCarousel"
				data-slide="next"> <span class="icon-next"></span>
			</a>
		</div>

	</ui:define>
	
	
	<ui:define name="container">
		<h:body>
			<h:form>
				<div class="row section">
					<div class="row">
						<div class="col-lg-12">
							<h1 class="page-header">Nos Offres du Moments</h1>
							<ol class="breadcrumb">
								<!-- 								<li> <h:commandLink value="Accueil" action="../identification" /></li> -->
								<li><a href="accueil.jsf">Accueil</a></li>
								<li class="active">Offres du Moment</li>
							</ol>
						</div>
					</div>
					<div class="row">


						<div class="col-lg-9">
							<c:forEach items="#{frontBean.listVoyageAccueil}" var="voyage">

								<div class="cercle" style="float: left;">

									<img
										src="/voyages-web/resources/img/#{voyage.destination.toLowerCase()}/1.jpg"
										class="cercleImage"></img>

									<div class="caption">
										<h4 class="pull-right">#{voyage.prix} €</h4>
										<h4>

											<h:commandLink class="btn btn-info"
												action="#{frontBean.rechercherDetailVoyages}"
												value="Détails">
												<f:setPropertyActionListener target="#{frontBean.idVoyage}"
													value="#{voyage.idVoyage}" />
											</h:commandLink>

											<span>#{voyage.destination}</span>
										</h4>
									</div>

									<div class="ratings">
										<p class="pull-right">
											<!--  #{voyage.nbrePlace} places pour info ici on declare le nombre de place disponible-->
										</p>
										<p>
											<span class="glyphicon glyphicon-star" style="color:yellow;"></span> <span
												class="glyphicon glyphicon-star" style="color:yellow;"></span> <span
												class="glyphicon glyphicon-star"></span> <span
												class="glyphicon glyphicon-star"></span> <span
												class="glyphicon glyphicon-star"></span>
										</p>
									</div>

								</div>
							</c:forEach>

						</div>


						<div class="col-lg-3">
							<div class="panel panel-primary">
								<div class="panel-heading">
									<strong>Rechercher un Voyage</strong>
								</div>
								<div class="panel-body">
									<div class="input-group">
										<div class="form-group input-group">
											<span class="input-group-addon text-center">Destination
												:</span>
											<h:inputText type="text" class="form-control"
												placeholder="Destination" value="#{frontBean.destination}" />
										</div>
									</div>
									<div class="col-md-6 col-md-offset-3">
										<h:commandButton class="btn btn-success btn-block"
											value="Rechercher" action="#{frontBean.rechercherVoyages}" />
									</div>
								</div>
							</div>
						</div>

					</div>
					<!-- div row -->


				</div>

			</h:form>

		</h:body>
	</ui:define>

	<ui:define name="body">
		<form jsfc="h:form" id="Form"></form>
	</ui:define>
</ui:composition>

</html>